<template>
  <view class="content">
    <u-navbar
      :background="{ background: '#fafafa' }"
      title="品牌积分"
      :borderBottom="false"
      titleColor="#191919"
    ></u-navbar>
    <div class="point-list">
      <view class="point-item" v-for="(item, index) in pointList" :key="index">
        <view class="store-box">
          <img src="" alt="" class="img" />
          <view>
            <view class="title">店铺名称</view>
            <view class="desc wes">店铺简介</view>
          </view>
          <view class="btn">进店</view>
        </view>
        <view class="count-box">
          <view class="count">星币 34567</view>
          <view class="line"></view>
          <view class="count">贝壳 345867</view>
        </view>
      </view>
      <uni-load-more :status="count.loadStatus"></uni-load-more>
    </div>
  </view>
</template>

<script>
import { getPointsData } from "@/api/members.js";
import { getMemberPointSum } from "@/api/members.js";
export default {
  data() {
    return {
      count: {
        loadStatus: "more",
      },
      pointList: [], //积分数据集合
      params: {
        pageNumber: 1,
        pageSize: 10,
      },
      pointData: {}, //累计获取 未输入 集合
    };
  },

  onLoad() {
    this.initPointData();
    this.getList();
  },

  /**
   * 触底加载
   */
  onReachBottom() {
    this.params.pageNumber++;
    this.getList();
  },
  methods: {
    /**
     * 获取积分数据
     */
    getList() {
      let params = this.params;
      uni.showLoading({
        title: "加载中",
      });
      getPointsData(params).then((res) => {
        if (this.$store.state.isShowToast) {
          uni.hideLoading();
        }
        if (res.data.success) {
          let data = res.data.result.records;
          if (data.length < 10) {
            this.$set(this.count, "loadStatus", "noMore");
            this.pointList.push(...data);
          } else {
            this.pointList.push(...data);
            if (data.length < 10) this.$set(this.count, "loadStatus", "noMore");
          }
        }
      });
    },

    /**
     * 获得累计积分使用
     */
    initPointData() {
      getMemberPointSum().then((res) => {
        this.pointData = res.data.result;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  background: #fafafa;
  padding: 16rpx;
}
.point-list {
  margin-top: 16rpx;
}

.point-item {
  width: 100%;
  height: 244rpx;
  padding: 20rpx;
  background: #ffffff;
  font-size: 28rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #212121;
  margin-bottom: 16rpx;
  border-radius: 16rpx;
  .store-box {
    width: 100%;
    height: 90rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .img {
      width: 90rpx;
      height: 90rpx;
      margin-right: 20rpx;
    }
    .title {
      font-weight: 500;
      text-align: left;
    }
    .desc {
      color: #757575;
      font-weight: 400;
      font-size: 24rpx;
      margin-top: 12rpx;
      width: 440rpx;
      margin-right: 24rpx;
    }
    .btn {
      width: 96rpx;
      height: 52rpx;
      background: #e6fff7;
      border-radius: 12rpx;
      text-align: center;
      line-height: 52rpx;
      font-size: 24rpx;
      color: #009968;
    }
  }
}
.count-box {
  width: 100%;
  height: 90rpx;
  background: #fafafa;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  margin-top: 24rpx;
  justify-content: space-around;
  .count {
    width: 49%;
    padding-left: 60rpx;
  }
  .line {
    width: 2rpx;
    height: 62rpx;
    background: #f2f2f2;
  }
}

.content {
  background: #f9f9f9;
}

.more {
  text-align: right;
  color: $u-tips-color;
  font-size: 24rpx;
  padding-right: 40rpx !important;
}
</style>
